<template>
	<match-media :min-width="225" :max-width="425">
		<view class="content">
			<image src="/static/startPAge.png" class="page-bg" mode=""></image>
			<view class="main">
				<view class="tabs-box">
					<uv-tabs :list="tabList" lineColor="#76DEAA" :activeStyle="{
						color:'#000'
					}" :inactiveStyle="{
						color:'#262F3F'
					}" @change="tabClick"></uv-tabs>
				</view>
				<!--======= App =======-->
				<template v-if="currentTabs===0">
					<view class="logo-box">
						<image src="/static/APPicon.png" class="logo" mode="aspectFill"></image>
					</view>
					<text class="title">北星掼牌-Android</text>
					<view class="download-btn" @click="toDownload">
						<text class="text">下载 北星掼牌 Android</text>
					</view>
					<text class="detail" v-if="androidInfo">版本：v{{androidInfo.version}}</text>
					<text class="detail">开发者：北星掼牌科技有限公司</text>
				</template>
				<!-- ======= 微信小程序 ======= -->
				<template v-else>
					<view class="mp-code">
						<image src="/static/mp-weixin.jpg" class="" mode=""></image>
					</view>
					<text class="detail">微信扫描二维码打开小程序</text>
					<text class="title">微信小程序</text>
				</template>

			</view>
			<image class="guide_icon" v-if="isWeixinState" @click="isWeixinState=false" mode="widthFix" src="/static/guide_icon.png"></image>
		</view>
	</match-media>
	<match-media :min-width="425">
		<view class="" style="display: flex;justify-content: center;width: 100%;">
			<view class="content" style="width: 375px;">

				<image src="/static/startPAge.png" class="page-bg" mode=""></image>
				<view class="main">
					<view class="tabs-box">
						<uv-tabs :list="tabList" lineColor="#76DEAA" :activeStyle="{
							color:'#000'
						}" :inactiveStyle="{
							color:'#262F3F'
						}" @change="tabClick"></uv-tabs>
					</view>
					<!--======= App =======-->
					<template v-if="currentTabs===0">
						<view class="logo-box-two">
							<image src="/static/APPicon.png" class="logo" mode="aspectFill"></image>
						</view>
						<text class="title-two">北星掼牌-Android</text>
						<view class="download-btn-two" @click="toDownload">
							<text class="text">下载 北星掼牌 Android</text>
						</view>
						<text class="detail-two" v-if="androidInfo">版本：v{{androidInfo.version}}</text>
						<text class="detail-two">开发者：北星掼牌科技有限公司</text>
					</template>
					<!-- ======= 微信小程序 ======= -->
					<template v-else>
						<view class="mp-code-two">
							<image src="/static/mp-weixin.jpg" class="" mode=""></image>
						</view>
						<text class="detail-two">微信扫描二维码打开小程序</text>
						<text class="title-two">微信小程序</text>
					</template>
				</view>
				<image class="guide_icon" v-if="isWeixinState" @click="isWeixinState=false" mode="widthFix" src="/static/guide_icon.png"></image>
			</view>
		</view>

	</match-media>

</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		$Api
	} from '@/api';
	const tabList = [{
		name: 'APP',
	}, {
		name: '小程序'
	}];
	const currentTabs = ref(0)
	const androidInfo = ref(null);
	const isWeixinState = ref(false);
	const isWeixin = () => { //判断是否为微信浏览器
		let target = navigator.userAgent.toLowerCase();
		let isWeixin = /micromessenger/.test(target);
		return isWeixin;
	};
	const isIos = () => { //判断是否为iOS平台
		const systemInfo = uni.getSystemInfoSync();
		const isIOS = systemInfo.platform === 'ios';
		return isIOS;
	}
	onLoad(() => {
		appDownload();
		// isWeixin.value=uni.getSystemInfoSync().platform=='ios'||uni.getSystemInfoSync().platform=='android'
	});
	const tabClick = (e) => {
		currentTabs.value = e.index;
	}
	const toDownload = () => {
		if (isWeixin()) {
			isWeixinState.value = true;
			uni.showToast({
				title: '请使用浏览器打开',
				icon: 'none'
			});
			return;
		} else if (isIos()) {
			uni.showToast({
				title: '暂不支持iOS平台',
				icon: 'none'
			})
			return;
		} else { //下载方法
			console.log('下载方法');
			if (androidInfo.value) {
				window.open(androidInfo.value?.url);
				// uni.downloadFile({
				// 	url: androidInfo.value?.url,
				// 	success: (res) => {
				// 		if (res.statusCode === 200) {
				// 			uni.saveFile({
				// 				tempFilePath: res.tempFilePath,
				// 				success: function(res) {
				// 					uni.showToast({
				// 						title: '下载成功', 
				// 						icon: 'none'
				// 					})
				// 					uni.openDocument({
				// 						filePath: res.tempFilePath,
				// 						success: (res) => {
				// 							console.log('打开文档成功');
				// 						}
				// 					})
				// 				}
				// 			})
				// 		}
				// 	}
				// })
			} else {
				uni.showToast({
					title: '暂无下载链接',
					icon: 'none'
				})
			}

		}
	}
	const appDownload = async () => {
		const res = await $Api.main.appDownload('', true);
		if (res.code === 1) {
			if (res.data?.Android) {
				// window.location.href = res.data.Android;
				androidInfo.value = res.data.Android;
			} else {
				uni.showToast({
					title: '暂无下载链接',
					icon: 'none'
				})
			}
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}
</script>
<style lang="scss" scoped>
	.page-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}

	.main {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 36rpx 32rpx;
		padding-top: 20rpx;
		position: absolute;
		top: 38vh;
		left: 50%;
		transform: translate(-50%);
		border-radius: 12rpx;
		background-color: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}

	.content {
		height: 100vh;
		position: relative;
		box-sizing: border-box;

		.tabs-box {
			margin-bottom: 20rpx;
		}

		.logo-box {
			width: 240rpx;
			height: 240rpx;
			border-radius: 18rpx;
			box-shadow: 0 0 18rpx 3rpx rgba(0, 0, 0, .6);
			overflow: hidden;


		}

		.logo-box-two {
			width: 120px;
			height: 120px;
			border-radius: 10px;
			box-shadow: 0 0 18rpx 3rpx rgba(0, 0, 0, .6);
			overflow: hidden;
		}

		.logo {
			width: 100%;
			height: 100%;
		}

		.title {
			font-size: 40rpx;
			color: #000;
			margin-top: 40rpx;
		}

		.title-two {
			font-size: 20px;
			color: #000;
			margin-top: 20px;
		}

		.mp-code {
			width: 480rpx;
			height: 480rpx;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			margin-bottom: 18rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.mp-code-two {
			width: 240px;
			height: 240px;
			border-radius: 12px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			padding: 10px;
			box-sizing: border-box;
			margin-bottom: 10px;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.download-btn {
			width: 480rpx;
			height: 64rpx;
			border-radius: 32rpx;
			background: linear-gradient(270deg, #7EDE9E 0%, #66DEC2 47%, #5CCCC0 100%);
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 0 18rpx 3rpx rgba(0, 0, 0, .6);

			.text {
				color: #0A534F;
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.download-btn-two {
			width: 240px;
			height: 32px;
			border-radius: 16px;
			background: linear-gradient(270deg, #7EDE9E 0%, #66DEC2 47%, #5CCCC0 100%);
			margin-top: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 0 10px 2px rgba(0, 0, 0, .6);

			.text {
				color: #0A534F;
				font-size: 14px;
				font-weight: bold;
			}
		}

		.detail {
			font-size: 24rpx;
			color: #999;
			margin-top: 20rpx;
		}

		.detail-two {
			font-size: 12px;
			color: #999;
			margin-top: 10px;
		}
	}

	.guide_icon {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
	}
</style>